<template>
    <div class="content">
        <div class="header">
            <img src="~assets/back_666.png" alt="" @click="$router.back()" />
            <p @click="handleLogin">跳过</p>
        </div>
        <div class="title">
            <img src="~assets/demand.png" alt="" />
        </div>
        <div class="form">
            <div class="input_item">
                <div class="input_title">
                    <p>采购标题</p>
                    <input
                        type="text"
                        maxlength="15"
                        v-model="form.title"
                        placeholder="请输入产品采购标题"
                    />
                </div>
            </div>
            <div class="input_item">
                <div class="input_title" @click="categoryStu = true">
                    <p>产品分类</p>
                    <input
                        type="text"
                        v-model="form.goodsCategory"
                        placeholder="请选择产品分类"
                        readonly
                    />
                </div>
                <img src="~assets/enter@2x.png" alt="" />
                <van-popup v-model="categoryStu" round position="bottom">
                    <van-picker
                        show-toolbar
                        ref="picker"
                        :columns="categoryList"
                        @cancel="categoryStu = false"
                        @confirm="onConfirm1"
                    />
                </van-popup>
            </div>
            <div class="input_item">
                <div class="input_title" @click="typeShow = true">
                    <p>采购类型</p>
                    <input
                        type="text"
                        v-model="typeName"
                        placeholder="请输入产品采购标题"
                        readonly
                    />
                </div>
                <img src="~assets/enter@2x.png" alt="" />
                <van-action-sheet
                    v-model="typeShow"
                    :actions="typeList"
                    @select="onSelect1"
                />
            </div>
            <div class="input_item">
                <div class="input_title">
                    <p>意向价格</p>
                    <input
                        type="text"
                        v-model="form.goodsPrice"
                        placeholder="请输入产品意向价格"
                        @click="priceShow = true"
                        readonly
                    />
                    <van-number-keyboard
                        :show="priceShow"
                        extra-key="."
                        close-button-text="完成"
                        theme="custom"
                        @input="handleChange"
                        @delete="handleDelete"
                        @blur="priceShow = false"
                    />
                </div>
                <div class="input_select" @click="show = true">
                    <p>{{ showName }}</p>
                    <i></i>
                </div>
                <van-action-sheet
                    v-model="show"
                    :actions="actions"
                    @select="onSelect"
                />
            </div>
            <div class="input_item">
                <div class="input_title">
                    <p>采购数量</p>
                    <input
                        type="text"
                        v-model="form.goodsAmount"
                        placeholder="请输入产品采购数量"
                        @click="amountShow = true"
                        readonly
                    />
                </div>
                <span class="abs">{{ showName.split("/")[1] }}</span>
                <van-number-keyboard
                    :show="amountShow"
                    extra-key="."
                    close-button-text="完成"
                    theme="custom"
                    @input="handleChange1"
                    @delete="handleDelete1"
                    @blur="amountShow = false"
                />
            </div>
            <div class="input_item">
                <div class="input_title" @click="place = true">
                    <p>意向产地</p>
                    <input
                        type="text"
                        v-model="form.origin"
                        placeholder="请选择意向产地"
                        readonly
                    />
                </div>
                <img src="~assets/enter@2x.png" alt="" />
                <van-popup v-model="place" round position="bottom">
                    <van-picker
                        show-toolbar
                        ref="picker"
                        :columns="countryList"
                        @cancel="place = false"
                        @confirm="onConfirm2"
                    />
                </van-popup>
            </div>
            <div class="input_item">
                <div class="input_title" @click="addrStu = true">
                    <p>收货地区</p>
                    <input
                        type="text"
                        v-model="addrName"
                        placeholder="请选择收货地区"
                        readonly
                    />
                </div>
                <img src="~assets/enter@2x.png" alt="" />
                <van-popup v-model="addrStu" round position="bottom">
                    <van-picker
                        show-toolbar
                        ref="picker"
                        :columns="addrList"
                        @cancel="addrStu = false"
                        @confirm="onConfirm"
                    />
                </van-popup>
            </div>
            <div class="input_item">
                <div class="input_title">
                    <p>联系电话</p>
                    <input
                        type="text"
                        v-model="form.contactsPhone"
                        placeholder="请输入联系电话"
                    />
                </div>
            </div>
            <div class="input_textarea">
                <p>采购描述</p>
                <textarea
                    v-model="form.details"
                    placeholder="请输入采购描述"
                    maxlength="300"
                ></textarea>
            </div>
            <div class="input_btn" @click="getSaveDate">立即发布</div>
        </div>
        <van-popup
            v-model="showDialog1"
            closeable
            close-icon="close"
            @open="open2"
            @close="close1"
        >
            <div class="content">
                <p class="p1 pd fs_32">尊敬的客户：</p>
                <p class="p2 pd">您的发布采购信息，已经同步到采购大厅。</p>
                <p class="p3 pd">
                    如有疑问，请拨打
                    <span class="fs_28 fw_600">4000-666-591</span>
                </p>
                <p class="p4 pd fs_28">
                    <span class="fw_600">{{ seconds1 }}s</span>后自动关闭
                </p>
                <div class="confirm" @click="close1">确定</div>
            </div>
        </van-popup>
    </div>
</template>
<script>
import {
    getSaveDate,
    getAreaByParentId,
    findCountryList,
} from "@/api/SupplyDemand";
import { uploadImage } from "@/api/Common";
import store from '@/store'
import * as types from '@/store/actions-type'
export default {
    data() {
        return {
            show: false,
            actions: [
                { name: "元/吨 ", id: "0" },
                { name: "元/千克", id: "1" },
                { name: "美元/吨 ", id: "2" },
                { name: "美元/千克 ", id: "3" },
            ],
            categoryList: ["猪", "牛", "羊", "鱼", "虾", "蟹"],
            categoryStu: false,
            typeList: [
                { name: "现货", id: "0" },
                { name: "期货", id: "1" },
            ],
            typeShow: false,
            typeName: "",
            showName: "",
            priceShow: false,
            showDialog1: false,
            seconds1: 60,
            amountShow: false,
            place: false,
            countryList: [],
            form: {
                cityId: "",
                cityName: "",
                companyId: "",
                companyName: "",
                contactsPhone: this.$store.state.userInfo.user.mobile,
                details: "",
                goodsAmount: "",
                goodsCategory: "",
                goodsPrice: "",
                goodsType: "",
                images: "",
                origin: "",
                priceType: "",
                provinceId: "",
                provinceName: "",
                title: "",
                type: 1,
                userId: "",
            },
            imgArr: [],
            addrId: [],
            addrName: [],
            addrStu: false,
            addrList: [],
        };
    },
    mounted() {
        this.showName =
            this.showName == "" ? this.actions[0].name : this.showName;
        this.form.priceType =
            this.form.priceType == ""
                ? this.actions[0].id
                : this.form.priceType;
        this.getAreaByParentId();
        this.findCountryList();
    },
    methods: {
        onSelect(item) {
            this.show = false;
            this.showName = item.name;
            this.form.priceType = item.id;
        },
        onSelect1(item) {
            this.typeShow = false;
            this.typeName = item.name;
            this.form.goodsType = item.id;
        },
        // afterRead(e) {
        //     let file = e.target.files[0];
        //     console.log(file);
        //     if (file.type !== "image/jpeg" && file.type !== "image/png") {
        //         this.$toast("请上传 jpg、png 格式图片");
        //         return false;
        //     }
        //     if (file.size / 1024 / 1024 > 10) {
        //         this.$toast("请上传10M以内的图片");
        //         return false;
        //     }
        //     let formData = new FormData();
        //     formData.append("file", file);
        //     uploadImage(formData).then((res) => {
        //         if (res.code === 0) {
        //             this.imgArr.push(res.data.url);
        //         }
        //     });
        // },
        detele(i) {
            this.imgArr.splice(i, 1);
        },
        findCountryList() {
            findCountryList().then((res) => {
                if (res.code === 0) {
                    this.countryList = res.data.map((v) => {
                        let arr = (v.children || []).map((w) => {
                            return {
                                text: w.name,
                                id: v.id,
                            };
                        });
                        return {
                            text: v.name,
                            id: v.id,
                            englishName: v.englishName,
                            children: arr,
                        };
                    });
                }
            });
        },
        getAreaByParentId() {
            getAreaByParentId().then((res) => {
                if (res.code === 0) {
                    this.addrList = res.data.map((v) => {
                        let arr = (v.children || []).map((w) => {
                            return {
                                text: w.label,
                                value: w.value,
                            };
                        });
                        return {
                            text: v.label,
                            value: v.value,
                            children: arr,
                        };
                    });
                }
            });
        },
        handleChange(val) {
            console.log(this.form.goodsPrice.split(".").length);
            if (this.form.goodsPrice.split(".").length == 2 && val == ".") {
                return;
            }
            if (
                (this.form.goodsPrice + val).split(".")[1] &&
                (this.form.goodsPrice + val).split(".")[1].length >= 2
            ) {
                this.form.goodsPrice =
                    (this.form.goodsPrice + val).split(".")[0] +
                    "." +
                    (this.form.goodsPrice + val).split(".")[1].substring(0, 2);
            } else {
                this.form.goodsPrice = this.form.goodsPrice + val;
            }
        },
        handleDelete() {
            this.form.goodsPrice = this.form.goodsPrice.substring(
                0,
                this.form.goodsPrice.length - 1
            );
        },
        handleChange1(val) {
            if (this.form.goodsAmount.split(".").length == 2 && val == ".") {
                return;
            }
            if (
                (this.form.goodsAmount + val).split(".")[1] &&
                (this.form.goodsAmount + val).split(".")[1].length >= 2
            ) {
                this.form.goodsAmount =
                    (this.form.goodsAmount + val).split(".")[0] +
                    "." +
                    (this.form.goodsAmount + val).split(".")[1].substring(0, 2);
            } else {
                this.form.goodsAmount = this.form.goodsAmount + val;
            }
        },
        handleDelete1() {
            this.form.goodsAmount = this.form.goodsAmount.substring(
                0,
                this.form.goodsAmount.length - 1
            );
        },
        onConfirm(value, index) {
            this.addrId = [
                this.addrList[index[0]].value,
                this.addrList[index[0]].children[index[1]].value,
            ];
            this.addrName = [
                this.addrList[index[0]].text,
                this.addrList[index[0]].children[index[1]].text,
            ];
            this.addrStu = false;
        },
        onConfirm1(value, index) {
            this.form.goodsCategory = value;
            this.categoryStu = false;
        },
        onConfirm2(value, index) {
            this.form.origin = this.countryList[index[0]].children[
                index[1]
            ].text;
            this.place = false;
        },
        getSaveDate() {
            if (!this.form.title) {
                this.$toast("请输入供应产品标题");
                return;
            }
            if (!this.form.goodsCategory) {
                this.$toast("请选择产品分类");
                return;
            }
            if (!this.form.goodsType) {
                this.$toast("请选择产品类型");
                return;
            }
            if (!this.form.goodsPrice) {
                this.$toast("请输入产品价格");
                return;
            }
            if (!this.form.goodsAmount) {
                this.$toast("请输入销售总量");
                return;
            }
            if (!this.form.origin) {
                this.$toast("请选择产品产地");
                return;
            }

            if (this.addrName.length === 0) {
                this.$toast("请选择发货地区");
                return;
            }
            if (!this.form.contactsPhone) {
                this.$toast("请输入联系电话");
                return;
            }
            if (!/^1[3456789]\d{9}$/.test(this.form.contactsPhone)) {
                this.$toast("联系电话格式错误");
                return;
            }
            if (!this.form.details) {
                this.$toast("请输入采购描述");
                return;
            }
            this.form.images = this.imgArr.join(",");
            this.form.provinceName = this.addrName[0];
            this.form.cityName = this.addrName[1];
            this.form.provinceId = this.addrId[0];
            this.form.cityId = this.addrId[1];
            this.form.userId = this.$store.state.userInfo.user.id;
            this.form.companyId = this.$store.state.userInfo.shopCompany.id;
            this.form.companyName = this.$store.state.userInfo.shopCompany.comName;
            getSaveDate(this.form).then((res) => {
                if (res.code === 0) {
                    this.showDialog1 = true;
                }
            });
        },
        open2() {
            this.seconds1 = 60;
            this.timer = setInterval(() => {
                this.seconds1--;
                if (this.seconds1 == 0) {
                    this.reset1();
                }
            }, 1000);
        },
        close1() {
            this.reset1();
            this.handleLogin()
        },
        // 登录
        handleLogin() {
            if (store.state.userInfo.user.id) {
                store.commit(types.SET_PERMISSION, true)
                window.location.href = store.state.beforeLoginRoute
            }
        },
        reset1() {
            this.showDialog1 = false;
            clearInterval(this.timer);
            this.timer = null;
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    width: 100%;
    min-height: 100%;
    background: #fff;
    padding-bottom: 100px;
    &::v-deep .van-picker__cancel {
        font-size: 30px;
    }
    &::v-deep .van-picker__confirm {
        font-size: 30px;
    }
    &::v-deep .van-number-keyboard__keys {
        .van-key__wrapper {
            button {
                height: 70px;
            }
        }
    }
    &::v-deep .van-action-sheet__name {
        font-size: 30px;
    }
    &::v-deep .van-action-sheet__item {
        height: 80px;
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
        img {
            margin-left: 56px;
            width: 24px;
            height: 42px;
        }
        p {
            margin-right: 46px;
            font-size: 32px;
            font-weight: bold;
            color: #333333;
        }
    }
    .title {
        width: 445px;
        height: 70px;
        margin-left: 50px;
        margin-top: 26px;
        img {
            width: 445px;
            height: 70px;
        }
    }
    .form {
        margin: 0 50px;
        .input_item {
            margin-top: 39px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0, 0, 0, 0.15);
            padding-bottom: 32px;
            .input_title {
                display: flex;
                flex: 1;
                p {
                    font-size: 30px;
                    font-weight: bold;
                    color: #333333;
                    white-space: nowrap;
                }
                input {
                    padding-left: 50px;
                    font-size: 32px;
                    flex: 1;
                }
                input::placeholder {
                    font-size: 32px;
                    color: rgba(0, 0, 0, 0.35);
                }
            }
            img {
                width: 9px;
            }
            .input_select {
                position: absolute;
                right: 50px;
                height: 60px;
                padding: 0 10px;
                border-radius: 12px;
                border: 3px solid #8e8e8e;
                display: flex;
                align-items: center;
                justify-content: center;
                p {
                    font-size: 28px;
                    color: #4a4a4a;
                }
                i {
                    display: inline-block;
                    width: 18px;
                    height: 9px;
                    background: url("~assets/bottom.png") no-repeat center
                        center;
                    background-size: 100% 100%;
                    margin-left: 10px;
                }
            }
            .abs {
                position: absolute;
                right: 50px;
            }
        }
        .input_img {
            margin-top: 34px;

            p {
                font-size: 30px;
                font-weight: bold;
                color: #333333;
                padding-bottom: 32px;
            }
            .upload_img {
                display: flex;
                flex-wrap: wrap;
                .img {
                    width: 295px;
                    height: 188px;
                    position: relative;
                    margin-bottom: 34px;
                    img {
                        width: 295px;
                        height: 188px;
                    }
                    i {
                        display: inline-block;
                        width: 65px;
                        height: 65px;
                        position: absolute;
                        right: -25px;
                        top: -25px;
                        background: url("~assets/close.png") no-repeat;
                        background-size: 100% 100%;
                    }
                }
                .img:nth-child(2n-1) {
                    margin-right: 60px;
                }
                .upload {
                    width: 295px;
                    height: 188px;
                    position: relative;
                    margin-bottom: 34px;
                    img {
                        width: 295px;
                        height: 188px;
                    }
                    input {
                        width: 295px;
                        height: 188px;
                        position: absolute;
                        left: 0;
                        opacity: 0;
                    }
                }
            }
        }
        .input_textarea {
            padding-top: 32px;
            p {
                font-size: 30px;
                font-weight: bold;
                color: #333333;
                padding-bottom: 22px;
            }
            textarea {
                width: 100%;
                padding: 27px 30px;
                height: 184px;
                background: #ffffff;
                border-radius: 8px;
                border: 2px solid #dedede;
                resize: none;
                font-size: 32px;
            }
        }
        .input_btn {
            display: inline-block;
            width: 650px;
            height: 90px;
            background: url("~assets/btn.png") no-repeat center center;
            background-size: 100% 100%;
            margin-top: 64px;
            color: #fff;
            line-height: 90px;
            text-align: center;
            font-size: 32px;
            padding-bottom: 60px;
        }
    }
}
.content > .van-popup {
    width: 690px;
    height: 500px;
    border-radius: 8px;
    .content {
        padding: 50px 20px;
        .pd {
            padding: 15px;
            color: #343434;
        }
        .p3 {
            color: #343434;
            span {
                color: #00428e;
            }
        }
        .p4 {
            text-align: center;
            color: #343434;
            span {
                color: #ea5620;
            }
        }
        .confirm {
            margin: 35px auto 0;
            width: 500px;
            height: 88px;
            line-height: 88px;
            border: 2px solid #00428e;
            color: #00428e;
            border-radius: 42px;
            text-align: center;
        }
    }
}
</style>